import Taro,{ Component } from "@tarojs/taro"
import { View, Text, Image } from '@tarojs/components'
import './cata.styl'
class Cata extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      select: 1,
      cata: [
        {name: '精品', id: 1},
        {name: '热销', id: 2},
        {name: '折扣', id: 3},
        {name: '主食', id: 4},
        {name: '川菜', id: 5},
        {name: '湘菜', id: 6},
        {name: '鲁菜', id: 7},
        {name: '徽菜', id: 8},
        {name: '淮扬菜', id: 9},
        {name: '热炒', id: 10},
        {name: '清单', id: 11},
        {name: '日料', id: 12},
      ]
    }
  }
  getActiveId({ id }) {
    console.log(this.props)
    this.setState({
      select: id
    },() => {
      this.props.onChangeCata(this.state.select)
    })
  }
  render () {
    const { select,cata } = this.state;
    return (
      <View className="cata">
      {cata.map(item => <Text className={`cata_name ${select === item.id ? 'cata_active' : null}`} onClick={this.getActiveId.bind(this,item)} key={item.id}>{item.name}</Text>)}
      </View>
    )
  }
}
export default Cata
